<template>
    <div id="service-update">
        <a-form :form="form" @submit="onSubmit" id="update-form" :hideRequiredMark="true">
            <div class="header">
                <h3>一、基本信息</h3>
                <div class="operate" v-if="is_admin == 1">
                    <transition name="slide-fade">
                        <a-button type="primary" @click="returned" v-show="!disabled">还原默认</a-button>
                    </transition>
                    <a-button @click="showPwd" type="primary">重置密码</a-button>
                    <a-button type="primary" v-if="disabled" @click="edit">修改</a-button>
                    <a-button type="primary" @click="onSubmit" v-if="!disabled">保存修改</a-button>
                </div>
            </div>
            <div class="form-main-content">
                <a-row :gutter="10">
                    <a-col :key= "0" :span="8" class="form-item">
                        <a-form-item label="服务号">
                            {{data.sn}}
                        </a-form-item>
                    </a-col>
                    <a-col :key= "1" :span="8" class="form-item">
                        <a-form-item label="服务号名称">
                            <a-input placeholder="服务号名称" v-show="!disabled" v-decorator="[
                            'name',
                            {
                                rules: [{ required: true, message: '请输入服务号名称' }],
                                initialValue: data.name
                            }
                        ]"/>
                            <span v-if="disabled">{{data.name}}</span>
                        </a-form-item>
                    </a-col>
                    <a-col :key= "2" :span="8" id="level-choose" class="form-item">
                        <a-form-item label="等级">
                            <a-input-number placeholder="等级" v-show="!disabled" :style="{width: '100%'}" :min='1' :max="99" v-decorator="[
                            'level',
                            {
                                rules: [{ required: true, message: '请输入等级' }],
                                initialValue: data.level
                            }
                        ]"/>
                            <span v-if="disabled">{{data.level}}</span>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="10">
                    <a-col :key= "3" :span="8" class="form-item">
                        <a-form-item label="服务号状态">
                            <a-select v-show="!disabled" :style="{width: '100%'}" v-decorator="['status', {initialValue: data.status}]">
                                <a-select-option :value="1">
                                    可用
                                </a-select-option>
                                <a-select-option :value="0">
                                    停用
                                </a-select-option>
                            </a-select>
                            <span v-if="disabled">{{parseInt(data.status) === 0 ? '停用' : '可用'}}</span>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="10">
                    <a-col :key= "4" :span="8" class="form-item">
                        <a-form-item label="对应销售">
                            <a-select v-show="!disabled"  @change="saleChange" v-decorator="['sale_id',{initialValue:data.sale_id}]" placeholder="请选择对应销售">
                                <a-select-option v-for="v in sales" :key="v.id" :value="v.id">
                                    {{v.realname}}({{v.username}})
                                </a-select-option>
                            </a-select>
                            <span v-if="disabled">{{data.sale_name}}</span>
                        </a-form-item>
                    </a-col>
                    <a-col :key= "5" :span="8" class="form-item">
                        <a-form-item label="对应调度">
                            <a-select v-show="!disabled" @change="dispatchChange" v-decorator="['dispatch_id',{initialValue:data.dispatch_id}]" placeholder="请选择对应调度">
                                <a-select-option v-for="v in dispatchs" :key="v.id" :value="v.id">
                                    {{v.realname}}({{v.username}})
                                </a-select-option>
                            </a-select>
                            <span v-if="disabled">{{data.dispatch_name}}</span>
                        </a-form-item>
                    </a-col>
                    <a-col :key= "6" :span="8" class="form-item">
                        <a-form-item label="对应财务">
                            <a-select v-show="!disabled" @change="financeChange" v-decorator="['finance_id',{initialValue:data.finance_id}]" placeholder="请选择对应财务">
                                <a-select-option v-for="v in finances" :key="v.id" :value="v.id">
                                    {{v.realname}}({{v.username}})
                                </a-select-option>
                            </a-select>
                            <span v-if="disabled">{{data.finance_name}}</span>
                        </a-form-item>
                    </a-col>
                    <a-col :key= "7" :span="8" class="form-item">
                        <a-form-item label="销售联系方式">
                            {{data.sale_mobile}}
                        </a-form-item>
                    </a-col>
                    <a-col :key= "8" :span="8" class="form-item">
                        <a-form-item label="调度联系方式">
                            {{data.dispatch_mobile}}
                        </a-form-item>
                    </a-col>
                    <a-col :key= "9" :span="8" class="form-item">
                        <a-form-item label="财务联系方式">
                            {{data.finance_mobile}}
                        </a-form-item>
                    </a-col>
                    <a-col :key= "10" :span="8" class="form-item">
                        <a-form-item label="登录账号">
                            {{data.username}}
                        </a-form-item>
                    </a-col>
                    <a-col :key= "11" :span="8" class="form-item">
                        <a-form-item label="账号名称">
                            <a-input placeholder="账号名称" v-show="!disabled" v-decorator="[
                            'account',
                            {
                                rules: [{ required: true, message: '请输入账号名称' }],
                                initialValue: data.account
                            }
                        ]"/>
                            <span v-if="disabled">{{data.account}}</span>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="10">
                    <a-col :key= "12" :span="8" class="form-item">
                        <a-form-item label="联系人">
                            <a-input placeholder="联系人" v-show="!disabled" v-decorator="[
                            'contact',
                            {
                                rules: [{ required: true, message: '请输入联系人' }],
                                initialValue: data.contact
                            }
                        ]"/>
                        <span v-if="disabled">{{data.contact}}</span>
                        </a-form-item>
                    </a-col>
                    <a-col :key= "13" :span="8" class="form-item">
                        <a-form-item label="手机号">
                            <a-input placeholder="手机号" v-show="!disabled" v-decorator="['mobile',
                                {
                                    rules: [{
                                        pattern: /^[1][34578][0-9]{9}$/, message: '手机号码格式不对'
                                    }],
                                    initialValue: data.mobile
                                }
                            ]"/>
                            <span v-if="disabled">{{data.mobile}}</span>
                        </a-form-item>
                    </a-col>
                    <a-col :key= "14" :span="8" class="form-item">
                        <a-form-item label="地址">
                            <a-input v-show="!disabled" placeholder="地址" v-decorator="['address', {initialValue: data.address}]"/>
                            <span v-if="disabled">{{data.address}}</span>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="10">
                    <a-col :key= "15" :span="24" class="form-item">
                        <a-form-item label="备注">
                            <a-textarea
                                    rows="6"
                                    v-show="!disabled"
                                    placeholder="请输入备注"
                                    v-decorator="['remark', {initialValue: data.remark}]"/>
                            <span v-if="disabled">{{data.remark ? data.remark : '无'}}</span>
                        </a-form-item>
                    </a-col>
                </a-row>
            </div>
        </a-form>
        <a-modal v-model="showpwd" title="修改密码" @ok="pwdSubmit" @cancel="cancel"
                 :cancelButtonProps="{ props: {type: 'primary'}}"
                 :keyboard = 'false'
                 :maskClosable = 'false'
                 centered>
            <a-form :form="form_pwd">
                <a-form-item label="操作账号密码" :labelCol="{lg: {span: 6}, sm: {span: 6}}"
                             :wrapperCol="{lg: {span: 18}, sm: {span: 18}}">
                    <a-input type="password" placeholder="操作账号密码" v-decorator="[
                        'handle_pwd',
                        {rules: [{ required: true, message: '请输入操作账号密码' }]}
                    ]"/>
                </a-form-item>
                <a-form-item label="重置密码" :labelCol="{lg: {span: 6}, sm: {span: 6}}"
                             :wrapperCol="{lg: {span: 18}, sm: {span: 18}}">
                    <a-input type="password" placeholder="重置密码" v-decorator="[
                        'password',
                        {
                            rules: [{ required: true, message: '请输入重置密码'
                            }, {
                              pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z!@#$%^&*]{6,20}$/, message: '密码由6-20位数字、字母、符号 (!@#$%^&*()) 组成，最少包含一个字母、一个数字'
                          }]
                        }
                    ]"/>
                </a-form-item>
                <a-form-item label="重输密码" :labelCol="{lg: {span: 6}, sm: {span: 6}}"
                             :wrapperCol="{lg: {span: 18}, sm: {span: 18}}">
                    <a-input type="password" placeholder="重输密码" v-decorator="[
                        'password_rep',
                        {
                            rules: [{
                                required: true, message: '请重输密码'
                                }, {
                                    validator: compareToFirstPassword
                                }
                            ]
                        }
                    ]"/>
                </a-form-item>
            </a-form>
        </a-modal>
    </div>
</template>

<script>


    export default {
        data() {
            return {
                id: 0,
                status: 1,
                disabled: true,
                dispatchs: [],
                sales: [],
                finances: [],
                data:[],
                form: this.$form.createForm(this),
                form_pwd: this.$form.createForm(this),
                labelCol: {lg: {span: 9}, sm: {span: 9}},
                wrapperCol: {lg: {span: 15}, sm: {span: 15}},
                showpwd: false,
            }
        },
        
        methods: {
            onSubmit(form) {
                this.form.validateFields((err, values) => {
                    if (!err) {
                        this.postData(values).then(res => {
                            if (res.id) {
                                this.$message.success(res.msg, 1);
                                this.data = {...this.data, ...values};
                                this.disabled = true
                            } else {
                                this.$message.warning(res.msg, 1);
                            }
                        })
                    }
                })
            },
            compareToFirstPassword  (rule, value, callback) {
                const form = this.form_pwd;
                if (value && value !== form.getFieldValue('password')) {
                    callback('两次输入密码不一致！');
                } else {
                    callback();
                }
            },
            edit() {
                this.disabled = false
            },
            returned() {
                let setData = {
                    name: this.data.name,
                    level: this.data.level,
                    status: this.data.status,
                    sale_id: this.data.sale_id,
                    dispatch_id: this.data.dispatch_id,
                    finance_id: this.data.finance_id,
                    account: this.data.account,
                    contact: this.data.contact,
                    mobile: this.data.mobile,
                    address: this.data.address,
                    remark: this.data.remark
                };
                this.form.setFieldsValue(setData)
            },
            async postData(param) {
                return await this.http('put', 'service/update?id=' + this.id, param);
            },
            async getDetail(id) {
                let data = await this.http('get', 'service/view', {id: id});
                data.role_id = String(data.role_id)
                return data;
            },
            showPwd() {
                this.showpwd = true
            },
            cancel() {
                this.form_pwd.resetFields();
            },
            saleChange(val){
              this.sales.map(v=>{
                if(v.id == val){
                  this.data.sale_mobile = v.mobile
                }
              })
            },
            dispatchChange(val){
              this.dispatchs.map(v=>{
                if(v.id == val){
                  this.data.dispatch_mobile = v.mobile
                }
              })
            },
            financeChange(val){
              this.finances.map(v=>{
                if(v.id == val){
                  this.data.finance_mobile = v.mobile
                }
              })
            },
            pwdSubmit() {
                //修改密码提交
                this.form_pwd.validateFields((err, values) => {
                    if (!err) {
                        this.http('put', 'service/update?id=' + this.id, values).then(res => {
                            if (res.id) {
                                this.showpwd = false;
                                this.$message.success(res.msg, 1);
                                this.form_pwd.resetFields();
                            } else {
                                this.$message.error(res.msg, 1);
                            }
                        })

                    }
                })
            },
        },
        mounted() {
            this.id = this.$route.params.id;
            this.getDetail(this.id).then(res => {
                this.data = res;
            });
            this.http("get", "user/service").then(
                res => {
                    this.dispatchs = res.dispatchs
                    this.sales = res.sales
                    this.finances = res.finances
                }
            )
        }
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "../../assets/scss/mixin";

    .header {
        @include fj();
        margin-bottom: 30px;

        .operate {
            .ant-btn + .ant-btn {
                margin-left: 40px;
            }
        }
    }

    .slide-fade-enter-active {
        transition: all .3s ease;
    }

    .slide-fade-leave-active {
        transition: all .3s ease;
    }

    .slide-fade-enter, .slide-fade-leave-to {
        transform: translateX(20px);
        opacity: 0;
    }
</style>
